import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Tooltip,Tag } from 'antd';
import { WeaNewScroll,WeaDatePicker,WeaTab,WeaRichText,WeaInputNumber,WeaTableEditable,WeaCheckbox,WeaTools,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
const toJS = mobx.toJS;
const { confirm } = Modal;
@observer
export default class ProgramView extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '保存',
          onClick: key => {},
        },
        {
          key: '1',
          icon: <i className='icon-coms-export' />,
          content: '提交',
          onClick: key => {},
        }
        ],
        _height:this.getHeight(),
        heightInit:false,
        columns:[
          {
            title: <span>分类</span>,
            dataIndex: 'cate',
            key: 'cate',
            width: '20%',
            com: [
              {
                type: 'INPUT',
                key: 'cate',
              }
            ],
        },
        {
            title: <span>指标类型</span>,
            dataIndex: 'accessitemid',
            key: 'accessitemid',
            width: '20%',
            com:  [
                {
                  type: 'SELECT',
                  key: 'accessitemid',
                  options: [
                    { key: "0", showname: "指标1" },
                    { key: "1", showname: "指标2" }
                  ]
                }
              ],
        },
        {
          title: <span>指标描述</span>,
          dataIndex: 'description',
          key: 'description',
          width: '15%',
          com:  [
              {
                type: 'TEXTAREA',
                key: 'description',
              }
            ],
      },
      {
        title: <span>权重(%)</span>,
        dataIndex: 'rate',
        key: 'rate',
        width: '10%',
        com:  [
            {
              type: 'INPUTNUMBER',
              key: 'rate',
            }
          ],
      },{
        title: <span>目标值</span>,
        dataIndex: 'target',
        key: 'target',
        width: '20%',
        com:  [
            {
              type: 'INPUT',
              key: 'target',
            }
          ],
      },
        ],
        columns1:[
          {
            title: <span>评分人</span>,
            dataIndex: 'checkusername',
            key: 'checkusername',
            width: '50%',
            com: [
              {
                type: 'BROWSER',
                key: 'checkusername',
                browserConditionParam: { type: 1 }
              }
            ],
        },
      {
        title: <span>权重(%)</span>,
        dataIndex: 'rate',
        key: 'rate',
        width: '40%',
        com:  [
            {
              type: 'INPUTNUMBER',
              key: 'rate',
            }
          ],
      },
        ],
      datalist:[{"id":"1"}],
      datalist1:[{"id":"1"}],
      topTab:[{
        title: "年度",
        viewcondition: "4"
      },
      {
        title: "半年",
        viewcondition: "3"
      },{
        title: "季度",
        viewcondition: "2"
      },
      {
        title: "月度",
        viewcondition: "1"
      }],
      }
    }
    componentWillMount() {//一些初始化请求
      
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    //添加一行表格数据
  willAdd(datas, addData, type) {
    if(type=="datalist"){
      this.setState({datalist:datas});
    }else{
      this.setState({datalist1:datas});
    }
  }
  //删除表格数据
  willDelete(datas, keys, type) {
    let{datalist,datalist1} = this.state;
    new Promise((resolve, reject) => {
      confirm({
        content: `确认删除已选择的数据行吗? `,
        onOk: () => {
          resolve(true);
          if(type=="datalist"){
            let _datalist = datalist;
            _datalist.map((element, index) => {
              for (let i = 0; i < keys.length; i++) {
                if (element.id == keys[i]) {
                  datalist.splice(index,1);
                }
              }
            })
            this.setState({datalist:datalist});
          }else{
            let _datalist = datalist1;
            _datalist.map((element, index) => {
            for (let i = 0; i < keys.length; i++) {
              if (element.id == keys[i]) {
                datalist1.splice(index,1);
              }
            }
          })
          this.setState({datalist1:datalist1});
          }
        },
        onCancel: () => {
          resolve(false);
        },
      })
    })
  }
  //复制单元格
  willCopy(datas, selectedKeys, copyDatas, type) {
    if(type=="datalist"){
      this.setState({datalist:datas});
    }else{
      this.setState({datalist1:datas});
    }
  }
    render() {
      const{menu,_height,datalist,columns,options,columns1,datalist1,topTab} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-perfor-programview" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title="杨文元绩效考核方案设置"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>console.log(2)}>引用方案</Button>),(<Button type='primary' onClick={()=>console.log(2)}>保存</Button>),(<Button type='ghost' onClick={()=>console.log(2)}>提交</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <WeaTab datas={topTab} keyParam="viewcondition" selectedKey={"1"}/>
            <WeaNewScroll height={_height-80} style={{ padding: '10px' }}>
              <div>
                 <WeaDatePicker viewAttr={3} value={"2019-05-01"} onChange={value => {}} style={{marginRight:10}}/>
                 <Tag color="red">未设置</Tag>
                 <span style={{color:"red"}}>提示：暂无已通过的2019年5月考核方案！</span>
              </div>
              <WeaSearchGroup showGroup={true} title="考核明细">
                      <WeaTableEditable
                        ref='tableEditPo'
                        buttonsType='inline'
                        showTitle={true}
                        columns={columns}
                        datas={toJS(datalist)}
                        willAdd={(datas, addData) => this.willAdd(datas, addData, "datalist")}
                        willDelete={(datas, keys) => this.willDelete(datas, keys, "datalist")}
                        willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "summaryout")}
                      />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='考核说明' showGroup={true} >
                        <WeaRichText
                          ckConfig={{
                            toolbar: [
                              { name: 'document', items: ['Source'] },
                              { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                              { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                              { name: 'colors', items: ['TextColor'] },
                              { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                              { name: 'insert', items: ['Image', 'Table', 'Smiley'] }
                            ],
                            height: 200,
                            autoGrow_minHeight: 200,
                            autoGrow_maxHeight: 200,
                            uploadUrl: '/api/develop/docs/uploadimage',
                            resize_enabled: false,
                          }}
                          extentsConfig
                          onToolsChange={(name, ids, list, type) => this.transfStr(name, ids, list, type)}
                        />
                    </WeaSearchGroup>
                    <WeaSearchGroup showGroup={true} title="考核评分">
                      <WeaTableEditable
                        ref='tableEditPo'
                        buttonsType='inline'
                        showTitle={true}
                        columns={columns1}
                        datas={toJS(datalist1)}
                        willAdd={(datas, addData) => this.willAdd(datas, addData, "datalist1")}
                        willDelete={(datas, keys) => this.willDelete(datas, keys, "datalist1")}
                        willCopy={(datas, selectedKeys, copyDatas) => this.willCopy(datas, selectedKeys, copyDatas, "summaryout")}
                      />
                    </WeaSearchGroup>
                    <WeaSearchGroup title='考核审批' showGroup={true}>
                      <WeaFormItem
                        label="审批人"
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 20 }}>
                          <WeaBrowser  type={1} inputStyle={{width:250}} onChange={(ids, names, datas) => {}}/>
                      </WeaFormItem>
              </WeaSearchGroup>
            </WeaNewScroll>
          </WeaRightMenu>
        </div>
    )
  }
};